<template>
	<view>
		<PCTopImage></PCTopImage>
		<view class="tabBar-view">
			<view class="tabBar-content">
				<view class="tabBar-item" :class="{'tabBar-active': tabBarActive == 1}" @click="onTabBar(1)">项目</view>
				<view class="tabBar-item" :class="{'tabBar-active': tabBarActive == 2}" @click="onTabBar(2)">说明</view>
			</view>

			<view class="pagination-button">
				<view class="button-item">
					<i class="el-icon-arrow-left"></i>
				</view>
				<view class="button-item">
					<i class="el-icon-arrow-right"></i>
				</view>
			</view>
		</view>

		<view class="project-view">
			<view v-if="tabBarActive == 1" class="search-view">
				<view class="sort-view">
					<view class="sort-item">综合排序</view>
					<view class="sort-item">
						<view>收益利率</view>
						<view class="arrows-view">
							<i class="el-icon-caret-top icon-css"></i>
							<i class="el-icon-caret-bottom icon-css"></i>
						</view>
					</view>
					<view class="sort-item">
						<view>起投金额</view>
						<view class="arrows-view">
							<i class="el-icon-caret-top icon-css"></i>
							<i class="el-icon-caret-bottom icon-css"></i>
						</view>
					</view>
					<view class="sort-item">
						<view>项目期限</view>
						<view class="arrows-view">
							<i class="el-icon-caret-top icon-css"></i>
							<i class="el-icon-caret-bottom icon-css"></i>
						</view>
					</view>
				</view>

				<view class="search-content">
					<view class="search-input">
						<image src="/static/search-icon.png" class="search-icon"></image>
						<input class="input-css" placeholder-class="plac-css" placeholder="请输入关键字" />
					</view>
					<view class="search-button">
						<image class="search-icon" src="/static/pc/pc-search-icon.png"></image>
						<view>筛选</view>
					</view>
				</view>
			</view>
			<view v-if="tabBarActive == 1" class="project-list">
				<view v-for="(item, index) in 10" :key="index" class="project-item" @click="onNavProject">
					<PCProjectItem></PCProjectItem>
				</view>
			</view>

			<view v-if="tabBarActive == 2" class="explain-list">
				<view v-for="(item, index) in 20" :key="index" class="explain-item" @click="onNavProject">
					<image src="/static/logo.png" class="explain-image" mode="aspectFill"></image>
					<view class="explain-name">2023-03-28 【受托】诺众受托资产管理项目</view>
					<view class="explain-time">发行时间：2024.03.09</view>
				</view>
			</view>

			<el-pagination class="el-pagination-css" background layout="prev, pager, next" :total="1000">
			</el-pagination>
		</view>
		<view style="height: 60px;"></view>
		<FloatTopButton></FloatTopButton>
	</view>
</template>

<script>
	export default {
		name: "PCProject",
		data() {
			return {
				tabBarActive: 1
			};
		},
		methods: {
			onTabBar(event) {
				this.tabBarActive = event
			},
			onNavProject() {
				uni.navigateTo({
					url: '/pages/projectDetail/projectDetail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .el-pagination-css {
		margin-top: 100px;

		.btn-prev,
		.btn-next {
			width: 30px;
			height: 28px;
			background: white;
			border: none;
		}

		.el-pager {
			.number {
				background: #FFFFFF !important;
				color: #2C1101;

				&:hover {
					color: #2C1101 !important;
				}
			}

			.more {
				@extend .number;
			}

			.el-icon-d-arrow-right,
			.el-icon-d-arrow-left {
				color: #2C1101 !important;
			}

			.active {
				background: #2C1101 !important;
				color: #2C1101;
			}
		}
	}

	.tabBar-view {
		width: 1200px;
		margin: 0 auto;
		@extend .row-between;
		padding-top: 28px;
		padding-bottom: 17px;
		padding-left: 53px;

		.tabBar-content {
			@extend .row;

			.tabBar-item {
				transition: all 0.3s;
				font-size: 18px;
				color: #1F0C00;
			}

			.tabBar-item+.tabBar-item {
				margin-left: 45px;
			}

			.tabBar-active {
				font-weight: 600;
				font-size: 22px;
				color: #1F0C00;
			}
		}

		.pagination-button {
			@extend .row;

			.button-item {
				width: 40px;
				height: 40px;
				border: 1px solid #2C1101;
				@extend .column;
			}

			.button-item+.button-item {
				margin-left: 7px;
			}
		}
	}

	.project-view {
		width: 1200px;
		margin: 0 auto;
		@extend .column;
		background: #FFFFFF;
		padding-bottom: 30px;

		.project-list {
			width: 100%;
			@extend .row-between;
			flex-wrap: wrap;
			padding-top: 2px;
			padding-left: 2px;
			padding-right: 24px;
			margin-top: -22px;

			.project-item {
				width: calc(100% / 2 - 22px);
				margin-left: 22px;
				margin-top: 22px;
			}
		}

		.search-view {
			width: 100%;
			padding: 36px 34px;

			@extend .row-between;

			.sort-view {
				@extend .row;

				.sort-item {
					@extend .row;
					font-size: 16px;
					color: #1F0C00;

					.arrows-view {
						@extend .column;
						font-size: 12px;
						margin-left: 5px;
						color: #B39696;

						.el-icon-caret-bottom {
							margin-top: -5px;
						}
					}
				}

				.sort-item+.sort-item {
					margin-left: 40px;
				}

			}

			.search-content {
				@extend .row;

				.search-input {
					width: 300px;
					height: 34px;
					background: #F6F6F6;
					border-radius: 21px;
					padding: 0 12px;
					@extend .row;

					.search-icon {
						width: 16px;
						height: 16px;
					}

					.input-css {
						flex: 1;
						height: 100%;
						font-weight: 400;
						font-size: 14px;
						margin-left: 4px;
					}

					.plac-css {
						font-weight: 400;
						font-size: 14px;
						color: #A7A7A7;
					}

				}

				.search-button {
					@extend .column;
					margin-left: 7px;
					font-size: 12px;
					color: #2C1101;

					.search-icon {
						width: 18px;
						height: 18px;
						margin-top: -2px;
					}
				}
			}
		}

		.explain-list {
			width: calc(100% + 5px);
			@extend .row-start;
			flex-wrap: wrap;
			padding-right: 25px;
			margin-left: -5px;
			margin-top: -30px;

			.explain-item {
				width: calc(100% / 3 - 30px);
				margin-left: 30px;
				margin-top: 55px;

				.explain-image {
					width: 100%;
					height: 226px;
				}

				.explain-name {
					width: 100%;
					padding: 0 12px;
					@extend .text-dot;
					font-weight: 600;
					font-size: 18px;
					color: #2C1101;
					margin-top: 15px;
				}

				.explain-time {
					width: 100%;
					padding: 0 12px;
					font-size: 14px;
					color: #2C1101;
					margin-top: 9px;
				}
			}
		}
	}
</style>